<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="example-toolbar" style="justify-content: space-between;"
        [style.height.px]="deviceSvc.topBar">
        <button mat-icon-button (click)="snav.toggle();">
            <mat-icon>{{snav.opened?'menu_open':'menu'}}</mat-icon>
        </button>
        <button mat-button [matMenuTriggerFor]="menu" (click)="msgSvc">
            <mat-icon matBadge="{{msgSvc.latestMessage.length}}" matBadgeOverlap="false" matBadgeSize="small"
                (mouseover)="msgDetails=true" (mouseout)="msgDetails=false" matBadgeColor="accent">notifications_none
            </mat-icon>
        </button>
    </mat-toolbar>
    <mat-menu #menu="matMenu" (closed)="msgSvc.clear()">
        <ng-container *ngIf="msgSvc.latestMessage.length===0">
            <div style="text-align: center;margin-top: 10px;">{{'NO_MSG'|translate}}</div>
        </ng-container>
        <mat-list role="list" *ngIf="msgSvc.latestMessage.length!==0">
            <ng-container>
                <mat-list-item role="listitem" *ngFor="let el of msgSvc.latestMessage">
                    <app-card-notification [value]="el"></app-card-notification>
                </mat-list-item>
            </ng-container>
        </mat-list>
    </mat-menu>
    <mat-sidenav-container class="example-sidenav-container"
        [style.marginTop.px]="mobileQuery.matches ? deviceSvc.topBar : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
            [opened]="navExpand('side_bar')" (opened)="openedHandler('side_bar')" (closed)="closedHander('side_bar')"
            [fixedTopGap]="deviceSvc.topBar" style="width: 256px;">
            <mat-expansion-panel (opened)="openedHandler('auth_nav')" (closed)="closedHander('auth_nav')"
                [expanded]="navExpand('auth_nav')">
                <mat-expansion-panel-header>
                    <mat-panel-title style="font-weight: 600;">
                        {{'AUTH_CENTER'| translate}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list>
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active" [preserveFragment]="true"
                        style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)" *ngFor="let nav of menuAuth">
                        <mat-icon style="padding-right:8px;">{{nav.icon}}</mat-icon>
                        {{nav.display| translate}}
                    </mat-list-item>
                </mat-nav-list>
            </mat-expansion-panel>
            <mat-expansion-panel (opened)="openedHandler('mall_nav')" (closed)="closedHander('mall_nav')"
                [expanded]="navExpand('mall_nav')">
                <mat-expansion-panel-header>
                    <mat-panel-title style="font-weight: 600;">
                        {{'MALL_CENTER'| translate}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list>
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                        style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)" *ngFor="let nav of menuMall">
                        <mat-icon style="padding-right:8px">{{nav.icon}}</mat-icon>{{nav.display | translate}}
                    </mat-list-item>
                </mat-nav-list>

            </mat-expansion-panel>
            <mat-expansion-panel (opened)="openedHandler('opt_nav')" (closed)="closedHander('opt_nav')"
                [expanded]="navExpand('opt_nav')">
                <mat-expansion-panel-header>
                    <mat-panel-title style="font-weight: 600;">
                        {{'OPT_CENTER'| translate}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list>
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                        style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)" *ngFor="let nav of menuOpt">
                        <mat-icon style="padding-right:8px">{{nav.icon}}</mat-icon>{{nav.display | translate}}
                    </mat-list-item>
                </mat-nav-list>

            </mat-expansion-panel>
            <mat-nav-list>
                <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                    style="font-size: 14px;" [queryParams]="nav.params" *ngFor="let nav of menuMisc">
                    <mat-icon style="padding-right:8px">{{nav.icon}}</mat-icon>{{nav.display| translate}}
                </mat-list-item>
            </mat-nav-list>
            <mat-nav-list>
                <mat-list-item mat-list-item style="font-size: 14px;" (click)="doLogout()">
                    <mat-icon style="padding-right:8px">exit_to_app</mat-icon>{{'LOGOUT'| translate}}
                </mat-list-item>
            </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content [style.padding-left.px]="mobileQuery.matches ? 15 : 30"
            [style.padding-right.px]="mobileQuery.matches ? 15 : 30">
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>